<template>
  <el-dialog title="表达式" :close-on-click-modal="false" :visible.sync="visible" center>
    <el-button class="miui-dialog-close-btn" @click="visible = false">关闭页面</el-button>
    <el-form :model="dataForm" ref="dataForm" label-width="80px">
      <el-form-item label="字段">
        <div style="padding: 10px;border: solid 1px #e7e7e7;background-color: #fff;">
          <el-button type="info" plain style="margin: 3px;" v-for="(fieldItem,fieldIndex) in fieldName" :key="fieldIndex" @click="fieldClickHandle(fieldItem,fieldIndex)">{{fieldItem}}</el-button>
        </div>
      </el-form-item>
      <el-form-item label="聚合">
        <div style="padding: 10px;border: solid 1px #e7e7e7;background-color: #fff;">
          <el-button type="info" plain v-for="(togetherItem,togetherIndex) in together" :key="'together' + togetherIndex" style="margin: 3px;" @click="togetherClickHandle(togetherItem,togetherIndex)">{{togetherItem}}</el-button>
        </div>
      </el-form-item>
      <el-form-item label="表达式">
        <code-mirror :value="dataForm.exp" ref="codeMirrorDialog" @getCodeMirror="getCodeData"></code-mirror>
      </el-form-item>
      <el-form-item label="别名">
        <el-input v-model="dataForm.alias"></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button type="info" @click="visible = false">关 闭</el-button>
      <el-button type="primary" @click="saveData">保 存</el-button>
    </span>
  </el-dialog>
</template>

<script>
  import CodeMirror from '../components/CodeMirror' // 编辑器

  import { testData } from '@/api/cboard/cboard'

  export default {
    name: "test",
    data() {
      return {
        visible: false,
        type: '',
        fieldName: [],
        together: ['sum','count','avg','max','min','distinct'],
        dataForm: {
          exp: '',
          alias: '',
        }
      }
    },
    components: {
      CodeMirror
    },
    methods: {
      init(type,data,list) {
        this.visible = true
        this.type = type
        this.fieldName = list

        this.dataForm = JSON.parse(JSON.stringify(data))
        if(type == 'add'){
          this.$set(this.dataForm, 'alias', '')
          this.$set(this.dataForm, 'exp', '')
        }
        this.$nextTick(() => {
            this.$refs.codeMirrorDialog.huixian()
        })
      },
      // 获取编辑器的值
      getCodeData(data) {
        this.$set(this.dataForm, 'exp', data)
      },
      // 点击字段
      fieldClickHandle(item,index){
        let pos1 = this.$refs.codeMirrorDialog.coder.getCursor();
        let pos2 = {};
        pos2.line = pos1.line;
        pos2.ch = pos1.ch;
        this.$refs.codeMirrorDialog.coder.replaceRange(item,pos2);
      },
      // 点击聚合
      togetherClickHandle(item,index){
        let val = item + '()'
        let pos1 = this.$refs.codeMirrorDialog.coder.getCursor();
        let pos2 = {};
        pos2.line = pos1.line;
        pos2.ch = pos1.ch;
        this.$refs.codeMirrorDialog.coder.replaceRange(val,pos2);
      },
      // 保存表达式
      saveData(){
        if(this.dataForm.alias){
          let timestamp = new Date().getTime()
          this.visible = false
          this.dataForm.type = 'exp'
          this.dataForm.timestamp = (this.dataForm.timestamp) ? this.dataForm.timestamp : timestamp
          this.$emit('refreshParams',{type: this.type,data:this.dataForm})
        }else{
          this.$message.warning('表达式别名不能为空')
        }
      }
    }
  }
</script>

<style scoped>

</style>
